<template>
  <div class="unfold j-primary-bgcolor" v-if="fold" @click="fold = false">
    <icon-svg name="zuobian"></icon-svg>
  </div>
  <div class="function-button" v-else>
      <div class="item">
        <div class="message j-primary-bgcolor" @click="contact">
            <icon-svg name="duanxin"></icon-svg>
        </div>
        <div class="text j-primary-color">通信录</div>
      </div>
      <div class="item">
        <div class="creatmeeting j-primary-bgcolor" @click="creatMeeting">
            <icon-svg name="shipinhuiyi"></icon-svg>
        </div>
        <div class="text j-primary-color">发起会议</div>
      </div>
      <div class="item" v-if="list.length">
        <div class="addmeeting j-primary-bgcolor" @click="addMeeting">
            <div class="pulse"  ></div>
            <icon-svg name="shipinhuiyi"></icon-svg>
        </div>
        <div class="text j-primary-color">加入会议</div>
      </div>
      <div class="btn j-primary-bgcolor" @click="fold = true">
        <icon-svg name="youbian"></icon-svg>
      </div>
      <!-- 通讯录 -->
      <contact-layer ref="contactLayer" v-if="showcontact"  />
      <creat-meeting-layer ref="creatMeeting" v-if="showCreatMeeting"  @success="onSuccess"/>
      <!-- 选择会议加入会议 -->
      <select-meeting-layer ref="selectMeetingLayer" v-if="showselectMeetingLayer"   />
    </div>


</template>

<script>
import ContactLayer from './contact';
import CreatMeetingLayer from './meeting';
import SelectMeetingLayer from './select-meeting-layer';
export default {
  components: {
    ContactLayer, CreatMeetingLayer, SelectMeetingLayer
  },
  data() {
    return {
      fold: false,
      list: [],
      timer: null,
      showcontact: false,
      showCreatMeeting: false,
      showselectMeetingLayer: false
    };
  },
  computed: {
    meetingInfo: {
      get() { return this.$store.state.gis.meeting; }
    }
  },
  created() {
    this.getMeetingList();
    this.timer = setInterval(() => {
      this.getMeetingList();
    }, 60 * 1000);
  },
  mounted() {
    // this.$nextTick(() => {
    //   const body = document.querySelector('body');
    //   if (body.append) {
    //     body.append(this.$el);
    //   } else {
    //     body.appendChild(this.$el);
    //   }
    // });
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    creatMeeting() {
      // this.$emit('creatMeeting');
      this.showCreatMeeting = true;
      this.$nextTick(_ => {
        this.$refs.creatMeeting.openDialog();
      });
    },
    onSuccess() {
      this.$nextTick(_ => {
        this.getMeetingList();
      });
    },
    contact() {
      // this.$emit('addContact');
      this.showcontact = true;
      this.$nextTick(_ => {
        console.log(` this.$refs.contactLayer`, this.$refs.contactLayer);
        this.$refs.contactLayer.openDialog();
        // this.$refs.rightBar.mainVideo.hideVideo();
      });
    },
    addMeeting() {
      // this.$emit('addMeeting');
      this.showselectMeetingLayer = true;
      this.$nextTick(_ => {
        this.$refs.selectMeetingLayer.openDialog();
      });
    },
    getMeetingList() {
      const params = {
        url: `/api/ems/meeting/page/list`,
        type: 'post',
        params: {}
      };
      this.$ajax(params).then(resp => {
        const { result, rows } = resp;
        if (result) {
          this.list = rows;
        }
      });
    }

  }
};
</script>


<style lang="scss" scoped>
// $primary-light-bgcolor:  #bad4ec;
// $primary-color:#196FBF;

// .j-primary-color {
//   color:$primary-color !important;
// }
// .j-primary-bgcolor {
//   background-color:$primary-color !important;
// }
// .j-primary-light-bgcolor {
//   background-color: $primary-light-bgcolor !important;
//  }
// .j-primary-border-color {
//   border-color:$primary-color !important;
// }
// .j-primary-light-border-color {
//   border-color: $primary-light-bgcolor !important;
// }
@keyframes warn {
 0% {
  transform: scale(0);
  opacity: 0.0;
 }
 25% {
  transform: scale(0);
  opacity: 0.0;
 }
 50% {
  transform: scale(0.0);
  opacity: 0.0;
 }
 75% {
  transform: scale(0.8);
  opacity: 0.5;
 }
 100% {
  transform: scale(1);
  opacity: 0.0;
 }
}
.unfold{
    position: absolute;
    bottom: 58px;
    right: 20px;
    z-index: 999;
    display: flex;
    width: 15px;
     height: 40px;
     display:flex;
     align-items: center;
     justify-content: center;
    .icon-svg {
        font-size: 2em;
        color: white !important;
    }
}
.function-button{
    border-radius: 4px;
    position: absolute;
    bottom: 35px;
    right: 20px;
    z-index: 999;
    display: flex;
    background: white;
    padding: 5px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    .btn{
      position: absolute;
      right: 0;
      width: 15px;
      height: 40px;
      top: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .text{
      text-align: center;    padding-top: 5px;
    }
    .item{
      padding: 0 10px;
    }
    .message,.creatmeeting,.addmeeting{
        width: 60px;
        height: 60px;
        // background: #0f64af;
        opacity: .7;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 12px;
        // color: white;
        // margin-right: 15px;
        cursor: pointer;

    }
    .icon-svg {
        font-size: 2em;
        color: white !important;
        margin-bottom: 5px;
    }
    .pulse{
      position: absolute;
      width: 100px; 
      height: 100px;
      border: 6px solid #f1f6f9;
      border-radius: 50%;
      z-index: 1;
      opacity: 0;
      -webkit-animation: warn 1.5s ease-out;
      -moz-animation: warn 1.5s ease-out;
      animation: warn 1.5s ease-out;
      -webkit-animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
    }
}
</style>